<script setup lang='ts'>
import { ref } from 'vue';

enum SizeEnum {
    S = "s",
    M = "m",
    L = "l",
    XL = "xl",
    XXL = "xxl",
    XXXL = "xxxl"
}
const showAvatar = ref(true)
const sizeData = ref<SizeEnum>(SizeEnum.S)// 尺寸的数据
const changeSize = () => {
    if (sizeData.value === SizeEnum.S) {
        sizeData.value = SizeEnum.M
    }
    else if (sizeData.value === SizeEnum.M) {
        sizeData.value = SizeEnum.L
    }
    else if (sizeData.value === SizeEnum.L) {
        sizeData.value = SizeEnum.XL
    }
    else if (sizeData.value === SizeEnum.XL) {
        sizeData.value = SizeEnum.XXL
    }
    else if (sizeData.value === SizeEnum.XXL) {
        sizeData.value = SizeEnum.XXXL
    }
    else {
        sizeData.value = SizeEnum.S
    }
}
</script>

<template>
    <div class="container">
        <h1>测试条件渲染-v-show</h1>
        <img v-if="showAvatar" class="avatar"
            src="http://gips3.baidu.com/it/u=2475428638,3303591043&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
            alt="">
        <button @click="showAvatar = !showAvatar">显示/隐藏</button>
        <h1>v-if和v-else-if和v-else</h1>
        <h2 v-if="sizeData === SizeEnum.S">小孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.M">大孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.L">青年的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XL">正常的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XXL">微胖的尺码</h2>
        <h2 v-else>老高的尺码</h2>
        <p>
            <button @click="changeSize">改变尺寸</button>
        </p>
    </div>
</template>

<style scoped>
.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}
</style>